<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import { storeToRefs } from 'pinia'
import { onMounted, reactive, ref } from 'vue'
import options from '@/assets/address.json'
import { putUserInfoAPI } from '@/api/user'
import { Message } from '@arco-design/web-vue'
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon'

const authStore = useAuthStore()
const { loginForm, userInfo } = storeToRefs(authStore)
const { getUserInfo } = authStore

// 判断时间
let hello = ''
const getHello = () => {
  const hours = new Date().getHours()
  if (hours >= 0 && hours <= 5) {
    hello = '晚上好 ~ '
  } else if (hours > 5 && hours <= 10) {
    hello = '早上好 ~ '
  } else if (hours > 10 && hours <= 13) {
    hello = '中午好 ~ '
  } else if (hours > 13 && hours <= 18) {
    hello = '下午好 ~ '
  } else {
    hello = '晚上好 ~ '
  }
}
getHello()

const userForm = reactive({
  id: 0,
  username: userInfo.value.username!,
  email: userInfo.value.email!,
  phone: '',
  address: '',
  area: [] as string[],
  avatar: ''
})

onMounted(async () => {
  await getUserInfo()
  userForm.id = userInfo.value.id!
  userForm.username = userInfo.value.username!
  userForm.email = userInfo.value.email!
  userForm.phone = userInfo.value.phone!
  userForm.address = userInfo.value.address!
  userForm.area = userInfo.value.address ? userInfo.value.address.split('-') : []
  userForm.avatar = userInfo.value.avatar!
})

// 省市区联动
const fieldNames = { value: 'name', label: 'name', children: 'areaList' }

const format = (options: any) => {
  const labels = options.map((option: any) => option.name)
  return labels.join('-')
}

const handleResetUserForm = () => {
  userForm.id = userInfo.value.id!
  userForm.username = userInfo.value.username!
  userForm.email = userInfo.value.email!
  userForm.phone = userInfo.value.phone!
  userForm.address = userInfo.value.address!
  userForm.area = userInfo.value.address ? userInfo.value.address.split('-') : []
  userForm.avatar = userInfo.value.avatar!
}

const handleEditUserInfo = () => {}

onMounted(() => {
  handleResetUserForm()
  console.log(userInfo.value)
})

const baseURL = import.meta.env.VITE_BASE_URL
// 处理图片上传
const file = ref()
// 图片上传地址
const action = baseURL + '/api/upload'

const onChange = (_: any, currentFile: any) => {
  file.value = {
    ...currentFile
    // url: URL.createObjectURL(currentFile.file),
  }
}

const onProgress = (currentFile: any) => {
  file.value = currentFile
}

const handleUploadImage = (data: any) => {
  userForm.avatar = data.response.data.url
}

const handleUpdateUserInfo = async () => {
  const res = await putUserInfoAPI({ ...userForm, address: userForm.area.join('-') })
  Message.success('修改成功')
  getUserInfo()
}
</script>

<template>
  <div class="p-50px w-full h-full">
    <div class="flex gap-20">
      <a-upload
        @success="handleUploadImage"
        @progress="onProgress"
        :action="action"
        :fileList="file ? [file] : []"
        :show-file-list="false"
        @change="onChange"
      >
        <template #upload-button>
          <div class="flex-col flex items-center gap-2">
            <div class="arco-upload-list-picture custom-upload-avatar w-120px! h-120px! rounded-full! overflow-hidden!">
              <img :src="baseURL + userForm.avatar" />
              <div class="arco-upload-list-picture-mask flex justify-center items-center">
                <IconEdit class="text-10" />
              </div>
            </div>
            <span class="text-gray-4">tips: 点击头像可修改</span>
          </div>
        </template>
      </a-upload>
      <div class="flex items-center">
        <a-button type="primary" class="w-120px h-40px text-4 mx-10" @click="handleResetUserForm"> 还原修改 </a-button>
        <a-button type="primary" status="success" class="w-120px h-40px text-4 mx-10" @click="handleUpdateUserInfo">
          保存修改
        </a-button>
      </div>
    </div>

    <div class="mt-5">
      <a-form-item field="value1" label="余额：" label-col-flex="100px">
        <span class="text-4">{{ userInfo.balance }} 元</span>
      </a-form-item>
    </div>

    <div class="mt-5">
      <a-form :model="userForm">
        <a-row :gutter="16">
          <a-col class="mt-5" :span="12">
            <a-form-item field="username" label="用户名：" label-col-flex="100px">
              <a-input size="large" v-model="userForm.username" placeholder="请输入用户名" />
            </a-form-item>
          </a-col>
          <a-col class="mt-5" :span="12">
            <a-form-item field="email" label="邮箱：" label-col-flex="100px">
              <a-input size="large" v-model="userForm.email" placeholder="请输入邮箱" />
            </a-form-item>
          </a-col>
          <a-col class="mt-5" :span="12">
            <a-form-item field="area" label="所在地区：" label-col-flex="100px">
              <a-cascader
                size="large"
                :options="options"
                v-model="userForm.area"
                path-mode
                :field-names="fieldNames"
                placeholder="请选择地址"
                :format-label="format"
              />
            </a-form-item>
          </a-col>
          <a-col class="mt-5" :span="12">
            <a-form-item field="phone" label="手机号码：" label-col-flex="100px">
              <a-input size="large" v-model="userForm.phone" placeholder="请输入手机号码" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<style scoped>
:deep(.arco-input-wrapper) {
  background-color: white;
}

:deep(.arco-input-wrapper) {
  border-color: #ddd;
}

:deep(.arco-input-wrapper:hover) {
  background-color: #fff;
  border-color: #76a5af;
}

:deep(.arco-input-wrapper.arco-input-focus) {
  border-color: #76a5af;
}

:deep(.arco-input-search .arco-input-suffix) {
  font-size: 20px;
}

:deep(.arco-form-item-label) {
  font-size: 18px;
}

:deep(.arco-select-view-single) {
  background-color: white;
  border-color: #ddd;
}

:deep(.arco-select-view-focus) {
  border-color: #76a5af;
}
</style>
